<template>
  <div>
    <div class="row-header">
      <el-form :inline="true" label-width="150px">
        <el-form-item label="业务号码">
          <el-input v-model.trim="search.cardNumber" placeholder="业务号码" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="Iccid">
          <el-input v-model.trim="search.iccid" placeholder="Iccid" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="月份">
          <el-date-picker
            value-format="yyyy-MM"
            format="yyyy-MM"
            v-model="search.searchDate"
            type="month"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" icon="el-icon-search" size="small" @click="currentPage = 0 ; onSubmit()">查询</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-table
        :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
        :data="tableData"
        ref="table"
        tooltip-effect="dark"
        class="row-main-table"
        @selection-change="handleSelectionChange"
        v-loading.fullscreen="tableLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        @sort-change="changeSort"
       >
        <el-table-column
          sortable='custom'
          prop="cardNumber"
          label="业务号码"
          align="center"/>
        <el-table-column
          sortable='custom'
          prop="iccid"
          label="iccid"
          align="center"/>
        <el-table-column
          sortable='custom'
          prop="searchDate"
          label="月份"
          align="center"/>

        <el-table-column :label="totalAll" align="center">
          <el-table-column
            sortable='custom'
            prop="todayUseFlow"
            label="流量"
            align="center"/>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="everyDayFlow(scope.row.id)">每日流量</el-button>
            <el-button type="primary" @click="cardInfo(scope.row.cardNumber)">卡板信息</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :hide-on-single-page="value"
        :total="totalPage"
        :page-sizes="[10,20,50,100]"
        background
        class="row-main-pager"></el-pagination>

    </div>
  </div>


</template>

<script>
  import {allMonthByCard,sumFlowByMonty} from '@/api/getData'

  export default {
    data() {
      return {
        totalAll:'',
        defDate:new Date(),
        search: {
          cardNumber: '',
          iccid: '',
          searchDate: ''
        },
        tableLoading: false,
        maxPage: 1,
        totalPage: 0,
        tableData: [],
        pageSize: 10,
        currentPage: 1,
        ascs: [],
        descs: [],
        value: false,
      }
    },
    name: "monthFlow",
    created() {
      this.initData();
    },
    methods: {
      async initData() {
        // this.tableLoading = true;
        sumFlowByMonty({
          searchDate: this.search.searchDate
        }).then(v=>{
          console.log('--------------')
          if(v._result){
            this.totalAll = '总流量：'+this.$toGB.exe(v.data)
          }
        })

        const returnData = await allMonthByCard({
            cardNumber: this.search.cardNumber,
            searchDate: this.search.searchDate,
            iccid: this.search.iccid,
            page: {
              current: this.currentPage + '',
              size: this.pageSize + '',
              ascs: this.ascs,
              descs: this.descs
            }
          },
          {
            obj: this,
            key: 'tableLoading'
          })
        this.tableData = []
        if (returnData._result) {
          this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
          this.totalPage = returnData.data.total;
          // 数据回显
          returnData.data.records.map(item => {
            const obj = {}
            obj.cardNumber = item.cardNumber
            obj.iccid = item.iccid
            obj.searchDate = item.searchDate
            obj.todayUseFlow = this.$toGB.exe(item.todayUseFlow)
            obj.id = item.id
            this.tableData.push(obj)
          })

        }
        this.tableLoading = false
      },
      changeSort(column) {
        //console.log(column);
        if (column.order == 'ascending') {
          this.descs = []
          this.ascs = [column.prop];
        } else {
          this.ascs = []
          this.descs = [column.prop];
        }
        this.initData();
      },

      handleSelectionChange(val) {
        this.tableChecked = val
        const length = this.tableChecked.length
        //console.log(`共 ${length} 条`)
      },
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.initData()
      },
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`)
        this.currentPage = val
        this.initData()
      },
      cardInfo(cardNumber){
        this.$router.push({path:'/card/oem-list',query:{cardNumber}})
      },
      everyDayFlow(cardId){
        this.$router.push({path:'/monthFlow/dayFlow',query:{cardId}})
      },
      onSubmit(){
        this.initData()
      }
    }
  }
</script>

<style scoped>
  .month-flow-header {
    margin-top: 30px;
  }

  .block {
    float: right;
    position: relative;
    top: 20px;
  }
</style>
